{% extends "base.html" %}

{% block title %}系统管理 - 消息列表{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block extra_css %}
<style>
/* 消息详情模态框样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    overflow-y: auto;
}

.modal-overlay.show {
    display: flex;
}

.recipients-modal {
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
}

.message-detail-modal {
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
}

/* 模态框内容样式 */
.modal-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 0;
    overflow: hidden;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #212529;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #343a40;
}

.modal-body {
    padding: 20px;
}

/* 标签样式 */
.badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 12px;
}

.badge-priority-high {
    background-color: #f8d7da;
    color: #721c24;
}

.badge-priority-medium {
    background-color: #fff3cd;
    color: #856404;
}

.badge-priority-normal {
    background-color: #d4edda;
    color: #155724;
}

.badge-priority-low {
    background-color: #e2e3e5;
    color: #383d41;
}

.badge-status-read {
    background-color: #d4edda;
    color: #155724;
}

.badge-status-unread {
    background-color: #fff3cd;
    color: #856404;
}

/* 卡片样式 */
.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 16px;
    margin-bottom: 16px;
}

.card-header {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
}

.card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #212529;
}

.card-body {
    padding: 0;
}

/* 列表样式 */
.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 12px 16px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.list-group-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.list-group-item:hover {
    background-color: #f8f9fa;
}

/* 状态指示器 */
.status-indicator {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
}

.status-indicator.read {
    color: #28a745;
}

.status-indicator.unread {
    color: #ffc107;
}

/* 用户头像 */
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #007bff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 500;
    margin-right: 12px;
}

/* 滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 表格样式 */
.table-container {
    overflow-x: auto;
    margin-bottom: 20px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.table-header {
    background-color: #f8f9fa;
    padding: 12px 16px;
    text-align: left;
    font-weight: 500;
    color: #495057;
    border-bottom: 1px solid #dee2e6;
}

.table-row:hover {
    background-color: #f8f9fa;
}

.table-cell {
    padding: 12px 16px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

/* 分页样式 */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 8px;
}

.page-item {
    margin: 0 2px;
}

.page-link {
    position: relative;
    display: block;
    padding: 8px 12px;
    color: #007bff;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.page-link:hover {
    color: #0056b3;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.page-item.active .page-link {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

/* 表单样式 */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* 按钮样式 */
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

.btn-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.btn-group > .btn {
    position: relative;
    flex: 1 1 auto;
}

.btn-group > .btn:not(:last-child) {
    margin-right: 5px;
}

/* 布局样式 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding-right: 15px;
    padding-left: 15px;
}

.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 15px;
    padding-left: 15px;
}

.col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
    padding-right: 15px;
    padding-left: 15px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* 工具类 */
.d-flex {
    display: flex !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.align-items-center {
    align-items: center !important;
}

.text-center {
    text-align: center !important;
}

.text-sm {
    font-size: 0.875rem !important;
}

.font-medium {
    font-weight: 500 !important;
}

.text-gray-500 {
    color: #6c757d !important;
}

.text-primary {
    color: #007bff !important;
}

.bg-primary {
    background-color: #007bff !important;
}

.text-white {
    color: #fff !important;
}

.bg-white {
    background-color: #fff !important;
}

.shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.rounded-lg {
    border-radius: 0.5rem !important;
}

.rounded-md {
    border-radius: 0.375rem !important;
}

.border {
    border: 1px solid #dee2e6 !important;
}

.border-b {
    border-bottom: 1px solid #dee2e6 !important;
}

.border-gray-200 {
    border-color: #e9ecef !important;
}

.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-6 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.py-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-6 {
    margin-bottom: 1.5rem !important;
}

.mr-1 {
    margin-right: 0.25rem !important;
}

.mr-2 {
    margin-right: 0.5rem !important;
}

.ml-1 {
    margin-left: 0.25rem !important;
}

.space-x-2 > * + * {
    margin-left: 0.5rem !important;
}

.space-y-4 > * + * {
    margin-top: 1rem !important;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}

.max-w-xs {
    max-width: 20rem !important;
}

.hover\:underline:hover {
    text-decoration: underline !important;
}

.hover\:bg-blue-600:hover {
    background-color: #2563eb !important;
}

.hover\:bg-gray-700:hover {
    background-color: #374151 !important;
}

.hover\:text-gray-500:hover {
    color: #6b7280 !important;
}

.transition {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

.whitespace-pre-wrap {
    white-space: pre-wrap !important;
}

.z-50 {
    z-index: 50 !important;
}

.fixed {
    position: fixed !important;
}

.relative {
    position: relative !important;
}

.inset-0 {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

.top-10 {
    top: 2.5rem !important;
}

.top-20 {
    top: 5rem !important;
}

.w-full {
    width: 100% !important;
}

.w-96 {
    width: 24rem !important;
}

.max-w-2xl {
    max-width: 42rem !important;
}

.max-w-4xl {
    max-width: 56rem !important;
}

.max-h-60 {
    max-height: 15rem !important;
}

.max-h-200 {
    max-height: 200px !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

/* 消息详情容器样式 */
.message-detail-container > div {
    margin-bottom: 1rem;
}

.message-detail-container > div:last-child {
    margin-bottom: 0;
}

/* 消息链接样式 */
.message-link {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s;
}

.message-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* 空状态样式 */
.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: #6b7280;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #9ca3af;
}

.empty-state p {
    margin: 0.5rem 0;
}

/* 文本工具类 */
.text-center {
    text-align: center;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-gray-500 {
    color: #6b7280;
}

.text-sm {
    font-size: 0.875rem;
}

.font-medium {
    font-weight: 500;
}

/* 间距工具类 */
.ml-1 {
    margin-left: 0.25rem;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mt-4 {
    margin-top: 1rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* 弹性布局工具类 */
.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

/* 布局工具类 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

/* 隐藏类 */
/* 隐藏类 - 重命名以避免与Tailwind CSS冲突 */
.modal-hidden {
    display: none !important;
}
</style>
{% endblock %}

{% block content %}
<div class="container">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="#" class="text-gray-500 hover:text-gray-700">系统管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">消息列表</li>
        </ol>
    </nav>

    <div class="page-header">
        <!-- 页面标题和操作按钮区域 -->
    </div>

    <div class="card">
        
        <!-- 消息筛选表单 -->
        <div class="card mb-6">
            <div class="card-header">
                <h3 class="card-title">消息筛选</h3>
            </div>
            <div class="card-body">
                <form method="GET" class="filter-form">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="message_type" class="form-label">消息类型</label>
                                <select name="message_type" id="message_type" class="form-control">
                                    <option value="">全部类型</option>
                                    <option value="系统通知" {% if request.args.get('message_type') == '系统通知' %}selected{% endif %}>系统通知</option>
                                    <option value="任务提醒" {% if request.args.get('message_type') == '任务提醒' %}selected{% endif %}>任务提醒</option>
                                    <option value="项目通知" {% if request.args.get('message_type') == '项目通知' %}selected{% endif %}>项目通知</option>
                                    <option value="审批通知" {% if request.args.get('message_type') == '审批通知' %}selected{% endif %}>审批通知</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="priority" class="form-label">优先级</label>
                                <select name="priority" id="priority" class="form-control">
                                    <option value="">全部优先级</option>
                                    <option value="紧急" {% if request.args.get('priority') == '紧急' %}selected{% endif %}>紧急</option>
                                    <option value="高" {% if request.args.get('priority') == '高' %}selected{% endif %}>高</option>
                                    <option value="普通" {% if request.args.get('priority') == '普通' %}selected{% endif %}>普通</option>
                                    <option value="低" {% if request.args.get('priority') == '低' %}selected{% endif %}>低</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="is_read" class="form-label">阅读状态</label>
                                <select name="is_read" id="is_read" class="form-control">
                                    <option value="">全部状态</option>
                                    <option value="0" {% if request.args.get('is_read') == '0' %}selected{% endif %}>未读</option>
                                    <option value="1" {% if request.args.get('is_read') == '1' %}selected{% endif %}>已读</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="start_date" class="form-label">开始日期</label>
                                <input type="date" name="start_date" id="start_date" class="form-control" 
                                       value="{{ request.args.get('start_date', '') }}">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="end_date" class="form-label">结束日期</label>
                                <input type="date" name="end_date" id="end_date" class="form-control" 
                                       value="{{ request.args.get('end_date', '') }}">
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="form-group">
                                <label for="keywords" class="form-label">关键词</label>
                                <input type="text" name="keywords" id="keywords" class="form-control" 
                                       placeholder="搜索标题或内容..." 
                                       value="{{ request.args.get('keywords', '') }}">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> 筛选
                        </button>
                        <a href="{{ url_for('message.system_message_list') }}" class="btn btn-secondary">
                            <i class="fas fa-redo"></i> 重置
                        </a>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 消息列表表格 -->
        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th class="table-header">ID</th>
                        <th class="table-header">标题</th>
                        <th class="table-header">类型</th>
                        <th class="table-header">发送者</th>
                        <th class="table-header">接收者</th>
                        <th class="table-header">优先级</th>
                        <th class="table-header">创建时间</th>
                        <th class="table-header">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% if messages.items %}
                    {% for message in messages.items %}
                    <tr class="table-row">
                        <td class="table-cell">{{ message.id }}</td>
                        <td class="table-cell">
                            <div class="message-title">
                            <a href="{{ url_for('message.view_message', message_id=message.id) }}" class="message-link">
                                {{ message.title }}
                            </a>
                        </div>
                        <div class="message-preview">
                            {{ message.content[:50] }}{% if message.content|length > 50 %}...{% endif %}
                        </div>
                        </td>
                        <td class="table-cell">
                            <span class="badge badge-type">{{ message.message_type }}</span>
                        </td>
                        <td class="table-cell">{{ message.sender.name if message.sender else '系统' }}</td>
                        <td class="table-cell">
                            {% if message.recipient %}
                                {{ message.recipient.name }}
                            {% else %}
                                <span class="badge badge-info">群发消息</span>
                                <button class="message-link ml-2" onclick="showRecipients({{ message.id }})">
                                    <i class="fas fa-users"></i>
                                </button>
                            {% endif %}
                        </td>
                        <td class="table-cell">
                            {% if message.priority == '紧急' %}
                                <span class="badge badge-priority-high">紧急</span>
                            {% elif message.priority == '高' %}
                                <span class="badge badge-priority-medium">高</span>
                            {% elif message.priority == '普通' %}
                                <span class="badge badge-priority-normal">普通</span>
                            {% else %}
                                <span class="badge badge-priority-low">低</span>
                            {% endif %}
                        </td>
                        <td class="table-cell">{{ message.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td class="table-cell">
                            <div class="btn-group">
                                <button onclick="showMessageDetail({{ message.id }})" class="btn btn-primary btn-sm">
                                    <i class="fas fa-eye"></i> 查看
                                </button>
                                {% if not message.is_read and message.recipient %}
                                <button onclick="markAsRead({{ message.id }})" class="btn btn-success btn-sm">
                                    <i class="fas fa-check"></i> 标记已读
                                </button>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                    {% else %}
                    <tr>
                    <td colspan="8" class="table-cell">
                        <div class="empty-state">
                            <i class="fas fa-inbox"></i>
                            <p>暂无消息数据</p>
                        </div>
                    </td>
                </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
        
        <!-- 分页控件 -->
{% if messages.pages > 1 %}
<div class="pagination-container">
    <nav aria-label="消息列表分页">
        <ul class="pagination">
            <!-- 上一页 -->
            {% if messages.has_prev %}
            <li class="page-item">
                <a href="{{ url_for('message.system_message_list', page=messages.prev_num, 
                        message_type=request.args.get('message_type', ''), 
                        priority=request.args.get('priority', ''),
                        is_read=request.args.get('is_read', ''),
                        start_date=request.args.get('start_date', ''),
                        end_date=request.args.get('end_date', ''),
                        keywords=request.args.get('keywords', '')) }}" 
                        class="page-link">
                    <i class="fas fa-chevron-left"></i>
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <span class="page-link"><i class="fas fa-chevron-left"></i></span>
            </li>
            {% endif %}
            
            <!-- 页码 -->
            {% for page_num in messages.iter_pages() %}
                {% if page_num %}
                    {% if page_num != messages.page %}
                    <li class="page-item">
                        <a href="{{ url_for('message.system_message_list', page=page_num, 
                                message_type=request.args.get('message_type', ''), 
                                priority=request.args.get('priority', ''),
                                is_read=request.args.get('is_read', ''),
                                start_date=request.args.get('start_date', ''),
                                end_date=request.args.get('end_date', ''),
                                keywords=request.args.get('keywords', '')) }}" 
                                class="page-link">
                            {{ page_num }}
                        </a>
                    </li>
                    {% else %}
                    <li class="page-item active">
                        <span class="page-link">{{ page_num }}</span>
                    </li>
                    {% endif %}
                {% else %}
                <li class="page-item disabled">
                    <span class="page-link">...</span>
                </li>
                {% endif %}
            {% endfor %}
            
            <!-- 下一页 -->
            {% if messages.has_next %}
            <li class="page-item">
                <a href="{{ url_for('message.system_message_list', page=messages.next_num, 
                        message_type=request.args.get('message_type', ''), 
                        priority=request.args.get('priority', ''),
                        is_read=request.args.get('is_read', ''),
                        start_date=request.args.get('start_date', ''),
                        end_date=request.args.get('end_date', ''),
                        keywords=request.args.get('keywords', '')) }}" 
                        class="page-link">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <span class="page-link"><i class="fas fa-chevron-right"></i></span>
            </li>
            {% endif %}
        </ul>
    </nav>
</div>
{% endif %}
    </div>
</div>

<!-- 接收者列表模态框 -->
<div id="recipientsModal" class="modal-overlay modal-hidden">
    <div class="modal-content recipients-modal">
        <div class="modal-header">
            <h3 class="modal-title">接收者列表</h3>
            <button type="button" class="modal-close" onclick="closeRecipientsModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <div id="recipientsList" class="custom-scrollbar">
                <!-- 接收者列表将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>
</div>

<!-- 消息详情模态框 -->
<div id="messageDetailModal" class="modal-overlay modal-hidden">
    <div class="modal-content message-detail-modal">
        <div class="modal-header">
            <h3 class="modal-title">消息详情</h3>
            <button type="button" class="modal-close" onclick="closeMessageDetailModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <div id="messageDetailContent">
                <!-- 消息详情将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

<script>
// 标记消息为已读 - 全局函数
function markAsRead(messageId) {
    fetch(`/message/api/mark-read/${messageId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('操作失败: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('操作失败');
    });
}

// 显示消息接收者
function showRecipients(messageId) {
    fetch(`/admin/messages/${messageId}/recipients`)
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const recipientsList = document.getElementById('recipientsList');
            recipientsList.innerHTML = '';
            
            // 显示空状态当没有接收者时
            if (data.recipients.length === 0) {
                recipientsList.innerHTML = '<div class="text-center py-4"><i class="fas fa-users text-muted mb-2" style="font-size: 2rem;"></i><p class="text-muted">暂无接收者</p></div>';
            } else {
                let recipientsHtml = '<div class="list-group custom-scrollbar">';
                
                data.recipients.forEach(recipient => {
                    const readStatusClass = recipient.read ? 'status-indicator read' : 'status-indicator unread';
                    const readStatusIcon = recipient.read ? 'fa-check-circle' : 'fa-times-circle';
                    const readStatusText = recipient.read ? '已读' : '未读';
                    
                    recipientsHtml += `
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center">
                                    <div class="user-avatar">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div>
                                            <div class="font-weight-bold">${recipient.name}</div>
                                            <div class="small text-muted">ID: ${recipient.id}</div>
                                        </div>
                                </div>
                                <div class="${readStatusClass}">
                                    <i class="fas ${readStatusIcon} mr-2"></i>
                                    <span>${readStatusText}</span>
                                </div>
                            </div>
                        </div>
                    `;
                });
                
                recipientsHtml += '</div>';
                recipientsList.innerHTML = recipientsHtml;
            }
            
            // 显示模态框
            document.getElementById('recipientsModal').classList.remove('modal-hidden');
            document.getElementById('recipientsModal').classList.add('show');
        } else {
            alert('获取接收者列表失败: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('获取接收者列表失败');
    });
}

// 关闭接收者列表模态框
function closeRecipientsModal() {
    document.getElementById('recipientsModal').classList.add('modal-hidden');
    document.getElementById('recipientsModal').classList.remove('show');
}

// 显示消息详情模态框
function showMessageDetail(messageId) {
    fetch(`/message/api/${messageId}/detail`)
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const message = data.message;
            const messageDetailContent = document.getElementById('messageDetailContent');
            
            // 构建优先级标签
            let priorityBadge = '';
            if (message.priority === '紧急') {
                priorityBadge = '<span class="badge badge-priority-high">紧急</span>';
            } else if (message.priority === '高') {
                priorityBadge = '<span class="badge badge-priority-medium">高</span>';
            } else if (message.priority === '普通') {
                priorityBadge = '<span class="badge badge-priority-normal">普通</span>';
            } else {
                priorityBadge = '<span class="badge badge-priority-low">低</span>';
            }
            
            // 构建状态标签
            const statusBadge = message.is_read ? 
                '<span class="badge badge-status-read">已读</span>' :
                '<span class="badge badge-status-unread">未读</span>';
            
            // 构建接收者列表（仅管理员可见）
            let recipientsHtml = '';
            if (message.recipients && message.recipients.length > 0) {
                recipientsHtml = `
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">接收者列表</h4>
                        </div>
                        <div class="card-body">
                            <div class="list-group custom-scrollbar" style="max-height: 200px; overflow-y: auto;">
                `;
                
                message.recipients.forEach(recipient => {
                    const readStatusClass = recipient.read ? 'status-indicator read' : 'status-indicator unread';
                    const readStatusIcon = recipient.read ? 'fa-check-circle' : 'fa-times-circle';
                    const readStatusText = recipient.read ? '已读' : '未读';
                    
                    recipientsHtml += `
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center">
                                    <div class="user-avatar">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div>
                                        <div class="font-weight-bold">${recipient.name}</div>
                                        <div class="small text-muted">ID: ${recipient.id}</div>
                                    </div>
                                </div>
                                <div class="${readStatusClass}">
                                    <i class="fas ${readStatusIcon} mr-2"></i>
                                    <span>${readStatusText}</span>
                                </div>
                            </div>
                        </div>
                    `;
                });
                
                recipientsHtml += `
                            </div>
                        </div>
                    </div>
                `;
            }
            
            // 构建关联对象信息
            let targetInfo = '';
            if (message.target_type && message.target_id) {
                targetInfo = `
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">关联对象</h4>
                        </div>
                        <div class="card-body">
                            <p style="margin-bottom: 0.25rem;"><span style="font-weight: 500;">类型:</span> ${message.target_type}</p>
                            <p><span style="font-weight: 500;">ID:</span> ${message.target_id}</p>
                        </div>
                    </div>
                `;
            }
            
            messageDetailContent.innerHTML = `
                <div class="message-detail-container">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">${message.title}</h3>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-md-6 mb-2">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-user mr-2 text-muted"></i>
                                        <span class="text-muted">发送者:</span>
                                        <span class="ml-2 font-weight-bold">${message.sender.name || '系统'}</span>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-clock mr-2 text-muted"></i>
                                        <span class="text-muted">发送时间:</span>
                                        <span class="ml-2">${message.created_at}</span>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-tag mr-2 text-muted"></i>
                                        <span class="text-muted">类型:</span>
                                        <span class="ml-2">${message.message_type}</span>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-exclamation-triangle mr-2 text-muted"></i>
                                        <span class="text-muted">优先级:</span>
                                        <span class="ml-2">${priorityBadge}</span>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-envelope mr-2 text-muted"></i>
                                        <span class="text-muted">状态:</span>
                                        <span class="ml-2">${statusBadge}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">消息内容</h4>
                        </div>
                        <div class="card-body">
                            <div class="custom-scrollbar" style="max-height: 200px; overflow-y: auto;">
                                <div style="white-space: pre-wrap;">${message.content}</div>
                            </div>
                        </div>
                    </div>
                    
                    ${targetInfo}
                    ${recipientsHtml}
                </div>
            `;
            
            // 显示模态框
            document.getElementById('messageDetailModal').classList.remove('modal-hidden');
            document.getElementById('messageDetailModal').classList.add('show');
        } else {
            alert('获取消息详情失败: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('获取消息详情失败');
    });
}

// 关闭消息详情模态框
function closeMessageDetailModal() {
    document.getElementById('messageDetailModal').classList.add('modal-hidden');
    document.getElementById('messageDetailModal').classList.remove('show');
}
</script>

{% block extra_js %}
{% endblock %}